@import "globals";

body {

  width: 100%;
  min-width: 100%;
  max-width: 100%;

  height: 100%;
  min-height: 100%;
  max-height: 100%;

  #wrapper {

    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    min-width: 100%;
    max-width: 100%;

    height: 100%;
    min-height: 100%;
    max-height: 100%;

    header {
      width: 100%;
      height: 5%;
      overflow: hidden;

      div {
        height: 100%;
      }

      #projectInfo {
        float: left;
        width: 50%;
      }

      #projectControl {
        float: right;
        width: 40%;

      }
    }

    #mainContainer {
      clear: both;
      display: block;
      height: 65%;
      width: 100%;

      #navigator {

        height: 100%;
        width: 25%;
        float: left;
        display: block;

        #navigatorControl {
          height: 7%;
        }

        #library, #compositions, #effects {
          height: 86%;
        }

        #navigatorCommands {
          height: 7%;
        }

      }

      #stageContainer {
        display: block;
        float: left;
        width: 75%;

        #stageControl {
          height: 7%;
        }

        #stage {
          height: 86%;
        }

        #stageCommands {
          height: 7%;
          min-height: 40px;
        }
      }

    }

    #timeline {
      clear: both;
      height: 30%;
      display: block;

    }
  }
}